<!--
 * @Author: yuqy
 * @Date: 2023-04-10 19:26:39
 * @LastEditors: yuqy
 * @LastEditTime: 2023-10-17 18:25:46
 * @Descripttion: -
-->
<script setup>
  // 按需引入指定iview组件
  import { Button, Table, Icon, Message } from 'view-ui-plus';
  import HelloWorld from '@/components/HelloWorld.vue'
  import { useStore } from 'vuex'
  import { ref, computed, nextTick } from 'vue'
  import localforage from 'localforage'
  import { getStoreMap, getStoreModulesMap, getStoreModulesGet } from '@/store/storeMap'
  const store = useStore()
  const count = ref(0)
  const clicks = () => {
    Message.info('This is a info tip')
  }
  // await nextTick()
  // 单独取store值
  const nowSystem = computed(() => store.state.nowSystem)
  // 批量取值
  // const { nowSystem } = getStoreMap(['nowSystem'])
  // 批量取moudles里面的值
  const { appid } = getStoreModulesMap('roomAgora', ['appid'])

  const { getUserPhone } = getStoreModulesGet('user', ['getUserPhone'])
  // 加载框操作
  const setLoading = ()=> {
    // 开启加载框
    // store.commit('updateLoading', true)
    // 关闭加载框
    // store.commit('updateLoading', false)
    // 开启antdegsin 加载框
    store.commit('updateMessageLoading', true)
    // 关闭antdegsin 加载框
    // store.commit('updateMessageLoading', false)
  }

  // 调取actionsDemo方法
  store.dispatch('roomAgora/actionsDemo');
  // 调取updateAgora方法
  store.commit('roomAgora/updateAgora', { token: '11133331', appid: '111222221', channelName: '23555533' });

  // 加载框操作
  const setVantLoading = ()=> {
    // 开启加载框
    store.commit('updateLoading', true)
    // 关闭加载框
    // store.commit('updateLoading', false)
    setTimeout(() => {
      store.commit('updateLoading', false)
    }, 3000);
  }

  const cancelLoading = ()=> {
    store.commit('updateMessageLoading', false)
  }

  // localforage 主要优点  存储空间大  无限制
  const myIndexedDB = localforage.createInstance({
    name: 'myIndexedDB',
  })

  const localforageSet = async (key)=> {
    let str = '123456789abc'
    // 产生1M的 字符串
    while (str.length < 1024 * 1000 * 1) {
      str += '123abc';
    }
    let value = str
    let res = await myIndexedDB.setItem(key, value)
  }

  const localforageGet = async (key)=> {
    store.commit('updateLoading', true)
    let val = await myIndexedDB.getItem(key)
    store.commit('updateLoading', false)
  }
  // 本地数据库
  const db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
  const inputWenDb = async ()=> {
    db.transaction((tx) => {
      // 创建数据表
      tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
      // 插入数据
      tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
      tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
    });
  }

  const getWenDb = async ()=> {
    db.transaction((tx) => {
      console.log(tx)
      // 查询数据
      tx.executeSql('SELECT * FROM LOGS', [], (tx, results) => {
        console.log(results.rows)
      }, null);
    });
  }

</script>
<template>
  <div class="login_wrap">
      <HelloWorld></HelloWorld>
      <h2>我是demo页</h2>
      <hr />
      <br />
      <router-link to='/demoSet'> 
        <v-btn color='red'>我要去demoset</v-btn>
      </router-link>
      <br />
      <br />
      <hr />
      <br />
      <Button type="primary">Primary</Button>
      <Button type="success" @click="setVantLoading">vant start Loading</Button>
      <br />
      <br />
      <Button type="success" @click="setLoading">iview start Loading</Button>
      <Button type="error" @click="cancelLoading">iview cancel Loading</Button>
      <br />
      <br />
      <Button type="success" @click="localforageSet('demo', '11111')">localforageSet</Button>
      <Button type="error" @click="localforageGet('demo')">localforageGet</Button>
      <Button type="error" @click="inputWenDb('demo')">inputWenDb</Button>
      <Button type="error" @click="getWenDb('demo')">getWenDb</Button>
      <br />
      <br />
      <Icon type="ios-checkmark" size='48'/>

      {{ nowSystem }} {{ appid }} 666 <br />

      {{ getUserPhone }}
  </div>
</template>
<style scoped>
.login_wrap {
  background: yellow;
  height: 100vh;
}
</style>
